Search Results for: mega menu

How to add a WooCommerce cart widget to your mega menu dropdown

How to add a cart widget to your menu This tutorial shows you how to add a submenu to your Cart Summary / Info item which displays a mini cart. Please note that the styling of your WooCommerce cart widget will be dictated by WooCommerce and your theme (if your theme provides cart widget styles. UberMenu does not apply its own styling to the cart widget 1. Add a Widget Area item as a child of your Cart Summary item In Appearance > Menus, add a new Widget Area item from the UberMenu Advanced Items group. Drag it into position as a child below your top level cart summary item. 2. Set up the Widget Area In your new Widget Area item, open the UberMenu settings and enter the name for your widget area in the Custom Widget Area setting. We’ll use Cart Click Save Menu Item to save the UberMenu item settings. Click Save Menu to save the new menu item to the menu – or you can do this later after you’ve set up the Widget in Step 3. 3. Add the widget Navigate to Appearance > Widgets in your WordPress admin. Find the Cart Widget Drag it into the [UberMenu] Cart widget area You can remove the title to just show the cart with no header above it if you like. Click Save to save the widget. 4. Set the submenu position and width, disable the submenu indicator (optional) Back in Appearance > Menus, Open the UberMenu menu item settings for the top level (Cart summary) item In the General tab, enable the Disable Submenu Indicator setting. In the Submenu tab, set the Mega Submenu Position to Right Edge of Parent Item or as desired. In the Submenu tab, set the Submenu Width to 450px or as […]

UberMenu Mega Menu

If you have UberMenu – WordPress Mega Menu installed on your site, you’ll automatically see some extra options visible when you go to duplicate your menu. By default, both are checked, but you can disable these if you like. Duplicate Menu Segments If your source menu contains UberMenu Menu Segments, the Duplicator will automatically recursively duplicate all segments, and link all the copied menus up properly when you duplicate them if you enable this option. Duplicate Widgets If your source menu items contain any UberMenu widget areas, the Duplicator will automatically duplicate these widget areas, as well as the widgets inside them if you enable this option. Custom Menu Item Styles The Duplicator will automatically trigger UberMenu to re-generate any custom menu item styles for the duplicated menu – this is important for individual menu item custom styles as the items in the new menus will have new IDs. Please note that any hand-coded custom styles will need to be copied manually and their IDs updated. (A better solution may be to use custom CSS classes that you can then re-use across menus and maintain just a single style).

How to recreate the UberMenu 3 Mega Menu Submenu

This video tutorial walks your through recreating the Mega Menu submenu from the UberMenu demo site, including the Standard, Descriptions, Images + Descriptions, Icons, and Custom column, as well as structuring the layout and setting a background image. Click through to the video on YouTube to be able to jump to specific sections of the video via the timestamp links in the Description. Menus Panel Structure

WordPress Mega Menu Plugin Announcement

/

Here’s a sneak peek of my new WordPress mega menu plugin, UberMenu, which will be released in the next few days. It’s been in development for a month and a half, and I’ve added all sorts of great features that makes it super easy to create fantastic looking mega menus in WordPress. It even integrates directly with the WordPress 3 Menu Management System, so you don’t have to change any code to use it. It’ll work out of the box with any theme that supports the WordPress 3 Menu System (calls add_theme_support(‘menus’) and has at least one registered menu area). Here are a few of the features: Works with WordPress 3 Menu System 10 Preset Styles included Great Control Panel options for customization and configuration Create your own styles easily with the Style Generator Add descriptions and images right from the WordPress Menus panel Supports both horizontal and vertical menu styles Includes both Fade and Slide effects Choose from click or hover submenu triggers UberMenu is fully widgetized, so adding non-link content to your mega menu is as easy as dragging and dropping a widget If widgets can’t take care of your needs, UberMenu also supports shortcode content, so the menu content is fully customizable And more! Check out the UberMenu Demo Site to find out more, and look for UberMenu to be released in the next couple of days.

How can I use dropdowns inside my mega submenus?

By default, your normal items within a mega submenu will be visible when the submenu is opened. By leaving the Submenu Type set to “Auto”, these column items become stacks. If you switch the Submenu Type to Mega or Flyout, you will get a dropdown instead, and this article deals with that situation. Flyouts within Mega Submenus are not recommended I do not generally recommend using dropdowns within mega submenus. This is generally confusing for users and leads to bad UX, so you should consider whether this is really the best format for your submenu. Generally, better formats would include using Tabs or else Flyout submenus as your first level and mega submenus as your second level. These formats achieve similar effects (hidden content revealed on activation within a submenu) in a more structured format. Enabling Dropdowns within Mega Submenus If you wish to allow dropdowns within a mega submenu, you can enable that in the Control Panel > Main UberMenu Configuration > Submenus > Allow Dropdown within Mega Submenu Please note: if you enable this setting, you cannot use the “Slide” submenu transition. This is because the slide transition requires hidden overflow to work, while dropdowns within mega submenus requires visible overflow to work. If you want to use this setting, you must switch to a Transition other than Slide Multi-level mega submenus (intended use case) One good use (really the intended one) for this is to allow a single-line submenu to have additional mega submenus so that you can have a double-level mega menu. This is a very specific scenario, however. Here’s the result when using the setting as intended:

Mega Submenu Layouts

Submenu layouts consist of a grid of menu items. Submenu Width In order to use the submenu grid, your submenu needs to have a predetermined width. That means that you should either use a full width submenu or set a specific width in the Menu Item Submenu Settings. Learn more about Submenu Position and Submenu Width Submenu Grid Via the submenu settings, you can set a default grid layout for the submenu. For example, if you want a 6-column submenu, you can set the Submenu Columns Default to 1/6. The submenu items whose Columns Width settings is set to auto will automatically become a 1/6th grid column. Learn more about Submenu Columns For more information on the UberMenu Grid, please see the UberMenu 3 Responsive Grid Demo Visual Guide For a visual rundown of how submenu layouts work, check out the Submenu Layout Demo